
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:rich="http://richfaces.org/rich"
    template="./template/newTemplate.xhtml"
    xmlns:a4j="http://richfaces.org/a4j">

    <ui:define name="content">

        <h:form>
            <div style="margin-left: 20%">
                <section id="contact-page">
                    <div class="container">
                        <div class="row contact-wrap"> 

                            <div class="col-sm-5 col-sm-offset-1">
                                <div class="form-group">
                                    <div style="margin-left: 20%">
                                        <div class="center">        
                                            <h2>Registrar Usuario</h2>
                                        </div> 
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Name *</label>
                                    <h:inputText class="form-control" value="#{registrarClienteBean.cliente.nombres}" required="true" requiredMessage="Debe ingresar el nombre del visitante"></h:inputText>
                                </div>
                                <div class="form-group">
                                    <label>Apellido *</label>
                                    <h:inputText class="form-control" value="#{registrarClienteBean.cliente.apellidos}" required="true" requiredMessage="Debe ingresar el apellido"></h:inputText>
                                </div>
                                <div class="form-group">
                                    <label>Numero de documento *</label>
                                    <h:inputText class="form-control" value="#{registrarClienteBean.cliente.numeroDocumento}" required="true" converterMessage="Debe ingresar correctamente el numero de documento" validatorMessage="Debe ingresar correctamente el numeor de documento" requiredMessage="Debe ingresar el numero de documento"></h:inputText>
                                </div>
                                <div class="form-group">
                                    <label>Tipo de documento *</label>
                                    <h:selectOneMenu class="form-control" value="#{registrarClienteBean.cliente.idTipoDocumento.idTipoDocumento}"
                                                     required="true"
                                                     requiredMessage="Debe seleccionar un tipo de documento"
                                                     >
                                        <f:selectItems value="#{registrarClienteBean.listTipoDocumento}" var="tipos"
                                                       itemLabel="#{tipos.nombreDocumento}"
                                                       itemValue="#{tipos.idTipoDocumento}"></f:selectItems>
                                    </h:selectOneMenu>
                                </div>
                                <div class="form-group">
                                    <label>Direccion *</label>
                                    <h:inputText class="form-control" value="#{registrarClienteBean.cliente.direccion}" required="true" requiredMessage="Debe ingresar la direccion de residencia"></h:inputText>
                                </div>
                                <div class="form-group">
                                    <label>Telefono *</label>
                                    <h:inputText class="form-control" value="#{registrarClienteBean.cliente.telefono}" required="true" requiredMessage="Debe ingresar el telefono"></h:inputText>
                                </div>
                                <div class="form-group">
                                    <label>E-mail *</label>

                                    <h:inputText value="#{registrarClienteBean.cliente.correo}"
                                                 class="form-control"
                                                 validatorMessage="El mail especificado no es válido"
                                                 >
                                        <f:validateRegex pattern="([\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z])?" />
                                    </h:inputText>
                                </div>


                                <div class="form-group">
                                    <label>Contraseña *</label>
                                    <h:inputSecret class="form-control" value="#{registrarClienteBean.cliente.clave}" required="true" requiredMessage="Debe ingresar la contraseña"></h:inputSecret>
                                </div>
                                <rich:messages id="error"></rich:messages>
                                <div style="text-align: center" class="form-group">
                                    <a4j:commandButton  style="
                                                        font-size: 20px;
                                                        border-radius: 15px 0px 0px 15px; 
                                                        /*                                text-shadow: 1px 2px 2px #D1E3CF;*/
                                                        /*                                background: #ffffff;*/
                                                        /*                                border: 1px #ffffff;*/
                                                        color: #ffffff;
                                                        box-shadow: inset 54px 54px 100px #dd8e0a;
                                                        "
                                                        action="#{registrarClienteBean.registrarClienteBd()}" 
                                                        oncomplete="if(#{!registrarClienteBean.resultadoOperation.ok}){#{rich:component('RegistroError')}.show(); } else {#{rich:component('RegistroOk')}.show(); }"
                                                        value="Registrar Usuario" ></a4j:commandButton>
                                </div>
                            </div>


                        </div><!--/.row-->
                    </div><!--/.container-->
                </section><!--/#contact-page-->
            </div>
        </h:form>
        <rich:popupPanel id="RegistroError" width="500" height="250" modal="true">
            <f:facet name="controls">

            </f:facet>
            <f:facet name="header">
                <h3 style="text-align: center; color: #ff3333; font-family: serif">Error al realizar el registro</h3>
            </f:facet>
            <h:form id="RegistroErrorForm">
                <a4j:region id="RegistroErrorRegionForm">
                    <h3 style="text-align: justify; color: #000; font-family: serif">
                        El cliente no pudo registrarse, Los datos ingresados no son validos o ya exiten en los registros del supermercado
                    </h3>
                    <br/>
                    <h:panelGroup style="margin-left: 40%;">
                        <h:commandButton style="text-align: center;
                                         font-size: 20px;
                                         border-radius: 15px 0px 0px 15px; 
                                         /*                                text-shadow: 1px 2px 2px #D1E3CF;*/
                                         /*                                background: #ffffff;*/
                                         /*                                border: 1px #ffffff;*/
                                         color: #ffffff;
                                         font-family: serif;
                                         box-shadow: inset 54px 54px 100px #ff3333;"  value="Aceptar" ></h:commandButton>
                    </h:panelGroup>
                </a4j:region>
            </h:form>
        </rich:popupPanel>
        <rich:popupPanel id="RegistroOk" width="500" height="250" modal="true">
            <f:facet name="controls">

            </f:facet>
            <f:facet name="header">
                <h3 style="text-align: center">El login se realizo correctamente</h3>
            </f:facet>
            <h:form id="RegistroOkForm">
                <a4j:region id="RegistroOkRegionForm">
                    <h3 style="text-align: justify">
                        Su registro se realizo correctamente.
                    </h3>
                    <br/>
                    <h:panelGroup style="margin-left: 40%">
                        <h:commandButton style="text-align: center"  value="Aceptar" ></h:commandButton>
                    </h:panelGroup>
                </a4j:region>
            </h:form>
        </rich:popupPanel>
    </ui:define>
</ui:composition>

